Prozkoumejte hexagonální a čistou architekturu pro tvorbu udržitelných, škálovatelných a testovatelných frontendových aplikací. Poznejte jejich principy a přínosy.
Architektura frontendu: Hexagonální a čistá architektura pro škálovatelné aplikace
S rostoucí složitostí frontendových aplikací se dobře definovaná architektura stává klíčovou pro udržovatelnost, testovatelnost a škálovatelnost. Dva populární architektonické vzory, které tyto problémy řeší, jsou Hexagonální architektura (také známá jako Porty a Adaptéry) a Čistá architektura. Ačkoli pocházejí ze světa backendu, tyto principy lze efektivně aplikovat i na vývoj frontendu pro tvorbu robustních a přizpůsobitelných uživatelských rozhraní.
Co je to architektura frontendu?
Architektura frontendu definuje strukturu, organizaci a interakce různých komponent v rámci frontendové aplikace. Poskytuje plán, jak je aplikace stavěna, udržována a škálována. Dobrá architektura frontendu podporuje:
- Udržovatelnost: Snadnější porozumění, úpravy a ladění kódu.
- Testovatelnost: Usnadňuje psaní jednotkových a integračních testů.
- Škálovatelnost: Umožňuje aplikaci zvládat rostoucí složitost a zátěž uživatelů.
- Znovu použitelnost: Podporuje opětovné použití kódu v různých částech aplikace.
- Flexibilita: Přizpůsobuje se měnícím se požadavkům a novým technologiím.
Bez jasné architektury se frontendové projekty mohou rychle stát monolitickými a obtížně spravovatelnými, což vede ke zvýšeným nákladům na vývoj a snížené agilitě.
Úvod do Hexagonální architektury
Hexagonální architektura, navržená Alistairem Cockburnem, si klade za cíl oddělit jádro obchodní logiky aplikace od externích závislostí, jako jsou databáze, UI frameworky a API třetích stran. Toho dosahuje prostřednictvím konceptu Portů a Adaptérů.
Klíčové koncepty Hexagonální architektury:
- Jádro (Doména): Obsahuje obchodní logiku a případy užití aplikace. Je nezávislé na jakýchkoli externích frameworcích nebo technologiích.
- Porty: Rozhraní, která definují, jak jádro interaguje s vnějším světem. Představují vstupní a výstupní hranice jádra.
- Adaptéry: Implementace portů, které propojují jádro s konkrétními externími systémy. Existují dva typy adaptérů:
- Řídící adaptéry (Primární adaptéry): Iniciují interakce s jádrem. Příkladem jsou UI komponenty, rozhraní příkazového řádku nebo jiné aplikace.
- Řízené adaptéry (Sekundární adaptéry): Jsou volány jádrem k interakci s externími systémy. Příkladem jsou databáze, API nebo souborové systémy.
Jádro neví nic o konkrétních adaptérech. Interaguje s nimi pouze prostřednictvím portů. Toto oddělení umožňuje snadno vyměnit různé adaptéry bez ovlivnění logiky jádra. Můžete například přejít z jednoho UI frameworku (např. React) na jiný (např. Vue.js) pouhou výměnou řídícího adaptéru.
Výhody Hexagonální architektury:
- Zlepšená testovatelnost: Jádro obchodní logiky lze snadno testovat izolovaně bez závislosti na externích systémech. Můžete použít mock adaptéry k simulaci chování externích systémů.
- Zvýšená udržovatelnost: Změny v externích systémech mají minimální dopad na logiku jádra. To usnadňuje údržbu a vývoj aplikace v čase.
- Větší flexibilita: Aplikaci můžete snadno přizpůsobit novým technologiím a požadavkům přidáním nebo výměnou adaptérů.
- Lepší znovupoužitelnost: Jádro obchodní logiky lze znovu použít v různých kontextech připojením k různým adaptérům.
Úvod do Čisté architektury
Čistá architektura, popularizovaná Robertem C. Martinem (strýčkem Bobem), je další architektonický vzor, který klade důraz na oddělení odpovědností a nezávislost. Zaměřuje se na vytvoření systému, který je nezávislý na frameworcích, databázích, UI a jakékoli externí agentuře.
Klíčové koncepty Čisté architektury:
Čistá architektura organizuje aplikaci do soustředných vrstev, přičemž nejabstraktnější a znovupoužitelný kód je v centru a nejkonkrétnější a technologicky specifický kód ve vnějších vrstvách.
- Entity: Reprezentují základní obchodní objekty a pravidla aplikace. Jsou nezávislé na jakýchkoli externích systémech.
- Případy užití (Use Cases): Definují obchodní logiku aplikace a způsob, jakým uživatelé interagují se systémem. Orchestrují Entity k provádění konkrétních úkolů.
- Adaptéry rozhraní: Převádějí data mezi případy užití a externími systémy. Tato vrstva zahrnuje presentery, kontrolery a brány (gateways).
- Frameworky a Ovladače: Nejvzdálenější vrstva obsahující UI framework, databázi a další externí technologie.
Pravidlo závislosti v Čisté architektuře říká, že vnější vrstvy mohou záviset na vnitřních vrstvách, ale vnitřní vrstvy nemohou záviset na vnějších. Tím je zajištěno, že jádro obchodní logiky je nezávislé na jakýchkoli externích frameworcích nebo technologiích.
Výhody Čisté architektury:
- Nezávislost na frameworcích: Architektura nespoléhá na existenci nějaké knihovny softwaru plného funkcí. To vám umožňuje používat frameworky jako nástroje, místo abyste byli nuceni vtěsnat svůj systém do jejich omezených mantinelů.
- Testovatelnost: Obchodní pravidla lze testovat bez UI, databáze, webového serveru nebo jakéhokoli jiného externího prvku.
- Nezávislost na UI: UI lze snadno změnit, aniž by se měnil zbytek systému. Webové UI může být nahrazeno konzolovým UI, aniž by se změnila jakákoli obchodní pravidla.
- Nezávislost na databázi: Můžete vyměnit Oracle nebo SQL Server za Mongo, BigTable, CouchDB nebo něco jiného. Vaše obchodní pravidla nejsou vázána na databázi.
- Nezávislost na jakékoli externí agentuře: Ve skutečnosti vaše obchodní pravidla prostě nevědí *vůbec nic* o vnějším světě.
Aplikace Hexagonální a Čisté architektury na vývoj frontendu
Ačkoli jsou Hexagonální a Čistá architektura často spojovány s vývojem backendu, jejich principy lze efektivně aplikovat i na frontendové aplikace ke zlepšení jejich architektury a udržovatelnosti. Zde je postup:
1. Identifikujte jádro (doménu)
Prvním krokem je identifikovat jádro obchodní logiky vaší frontendové aplikace. To zahrnuje entity, případy užití a obchodní pravidla, která jsou nezávislá na UI frameworku nebo jakýchkoli externích API. Například v e-commerce aplikaci může jádro zahrnovat logiku pro správu produktů, nákupních košíků a objednávek.
Příklad: V aplikaci pro správu úkolů by se jádrová doména mohla skládat z:
- Entity: Úkol, Projekt, Uživatel
- Případy užití: VytvořitÚkol, AktualizovatÚkol, PřiřaditÚkol, DokončitÚkol, SeznamÚkolů
- Obchodní pravidla: Úkol musí mít název, úkol nemůže být přiřazen uživateli, který není členem projektu.
2. Definujte porty a adaptéry (Hexagonální architektura) nebo vrstvy (Čistá architektura)
Dále definujte porty a adaptéry (Hexagonální architektura) nebo vrstvy (Čistá architektura), které oddělují jádro od externích systémů. Ve frontendové aplikaci mohou zahrnovat:
- UI komponenty (Řídící adaptéry/Frameworky a ovladače): React, Vue.js, Angular komponenty, které interagují s uživatelem.
- API klienti (Řízené adaptéry/Adaptéry rozhraní): Služby, které provádějí požadavky na backendová API.
- Úložiště dat (Řízené adaptéry/Adaptéry rozhraní): Local storage, IndexedDB nebo jiné mechanismy pro ukládání dat.
- Správa stavu (Adaptéry rozhraní): Redux, Vuex nebo jiné knihovny pro správu stavu.
Příklad s použitím Hexagonální architektury:
- Jádro: Logika správy úkolů (entity, případy užití, obchodní pravidla).
- Porty:
TaskService(definuje metody pro vytváření, aktualizaci a získávání úkolů). - Řídící adaptér: React komponenty, které používají
TaskServicek interakci s jádrem. - Řízený adaptér: API klient, který implementuje
TaskServicea provádí požadavky na backendové API.
Příklad s použitím Čisté architektury:
- Entity: Úkol, Projekt, Uživatel (čisté JavaScript objekty).
- Případy užití: CreateTaskUseCase, UpdateTaskUseCase (orchestrují entity).
- Adaptéry rozhraní:
- Kontrolery: Zpracovávají vstup od uživatele z UI.
- Presentery: Formátují data pro zobrazení v UI.
- Brány (Gateways): Interagují s API klientem.
- Frameworky a Ovladače: React komponenty, API klient (axios, fetch).
3. Implementujte adaptéry (Hexagonální architektura) nebo vrstvy (Čistá architektura)
Nyní implementujte adaptéry nebo vrstvy, které propojují jádro s externími systémy. Ujistěte se, že adaptéry nebo vrstvy jsou nezávislé na jádru a že jádro s nimi interaguje pouze prostřednictvím portů nebo rozhraní. To vám umožní snadno vyměnit různé adaptéry nebo vrstvy bez ovlivnění logiky jádra.
Příklad (Hexagonální architektura):
// Port TaskService
interface TaskService {
createTask(taskData: TaskData): Promise;
updateTask(taskId: string, taskData: TaskData): Promise;
getTask(taskId: string): Promise;
}
// Adaptér API klienta
class ApiTaskService implements TaskService {
async createTask(taskData: TaskData): Promise {
// Proveď API požadavek na vytvoření úkolu
}
async updateTask(taskId: string, taskData: TaskData): Promise {
// Proveď API požadavek na aktualizaci úkolu
}
async getTask(taskId: string): Promise {
// Proveď API požadavek na získání úkolu
}
}
// Adaptér React komponenty
function TaskList() {
const taskService: TaskService = new ApiTaskService();
const handleCreateTask = async (taskData: TaskData) => {
await taskService.createTask(taskData);
// Aktualizuj seznam úkolů
};
// ...
}
Příklad (Čistá architektura):
// Entity
class Task {
constructor(public id: string, public title: string, public description: string) {}
}
// Případ užití
class CreateTaskUseCase {
constructor(private taskGateway: TaskGateway) {}
async execute(title: string, description: string): Promise {
const task = new Task(generateId(), title, description);
await this.taskGateway.create(task);
return task;
}
}
// Adaptéry rozhraní - Brána
interface TaskGateway {
create(task: Task): Promise;
}
class ApiTaskGateway implements TaskGateway {
async create(task: Task): Promise {
// Proveď API požadavek na vytvoření úkolu
}
}
// Adaptéry rozhraní - Kontroler
class TaskController {
constructor(private createTaskUseCase: CreateTaskUseCase) {}
async createTask(req: Request, res: Response) {
const { title, description } = req.body;
const task = await this.createTaskUseCase.execute(title, description);
res.json(task);
}
}
// Frameworky a ovladače - React komponenta
function TaskForm() {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const apiTaskGateway = new ApiTaskGateway();
const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
const taskController = new TaskController(createTaskUseCase);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
};
return (